<template>
  <div class="app-container">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col :span="4">
        <el-input v-model="customerName" clearable size="small" placeholder="客户名称/员工" />
      </el-col>
      <el-col :span="16">
        <el-row :gutter="10" type="flex" align="midden">
          <el-date-picker
            v-model="siginTime"
            size="small"
            type="datetimerange"
            value-format="timestamp"
            range-separator="至"
            start-placeholder="签到开始日期"
            end-placeholder="签到结束日期"
          />
          <el-button style="margin-left:10px" size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
          <!-- <el-button size="small" type="success" icon="el-icon-download">导 出</el-button> -->
        </el-row>
      </el-col>
    </el-row>
    <div style="margin-top:20px">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="690px"
        max-height="690px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="customerName" label="客户名称" align="center" />
        <el-table-column prop="customerAddress" label="签到地址" align="center" show-overflow-tooltip />
        <el-table-column prop="createName" label="签到员工" align="center" />
        <el-table-column prop="createTime" label="签到时间" align="center">
          <template slot-scope="{row}">
            <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" fixed="right" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="danger" @click="handleDelete(row)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { signInPageList, signInDeleteById } from '@/api/customer'
export default {
  name: 'CustomerSignIn',
  components: {
    Pagination
  },
  data() {
    return {
      customerName: '',
      siginTime: '',
      tableData: [
        {
          name: '小猿人编程培训中心',
          address: '佛山顺德大良环城路87-89号光小猿星球'
        }
      ],
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      multipleSelection: []
    }
  },
  computed: {

  },
  created() {
    this.getList()
  },
  methods: {
    handleSearch() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 10
      }
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDelete(row) {
      this.$confirm('是否删除此条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        signInDeleteById({
          id: row.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getList() {
      signInPageList({
        'name': this.customerName,
        'startTime': this.siginTime[0] || '',
        'endTime': this.siginTime[1] || '',
        'currentPage': this.listQuery.currentPage,
        'pageSize': this.listQuery.pageSize,
        'businessId': '0'
      }).then(res => {
        const { records, total } = res.data
        this.tableData = records
        this.total = total
      })
    }
  }
}
</script>
